<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-link-active{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-link to='/a1' tag='span'>111</router-link>
        <router-link to='/a2'>222</router-link>
        <router-view></router-view>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        let a1 = {
            template:`<h1>1111111111</h1>`
        }
        let a2 = {
            template:`<h1>222222222222222</h1>`
        }
        var router  = new VueRouter({
            routes:[
                {
                    path:'/a1',
                    component:a1
                },
                {
                    path:'/a2',
                    component:a2
                },
                {
                    path:'/',
                    component:a1
                }
            ]
        })
        router.beforeEach((to,from,next)=>{
            console.log('现在去'+to);
            console.log('现在是'+from);
        })
        let aa = new Vue({
            el:'#app',
            router:router
        })
    </script>
</body>
</html>